<template>
  <div class="upload-image">
    <div class="image-box" v-if="uploadImg">
      <img :src="uploadImg" alt="">
      <div class="reupload">重新上传</div>
    </div>
    <div v-else class="flex-col flex-center">
      <span class="plus-icon flex flex-center"><van-icon name="plus" /></span>
      <span class="text-style font-12 mar-t-20">{{text}}</span>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    text: {
      type: String,
      default: ''
    },
    imgSrc: {
      type: String,
      default: ''
    }
  },
  computed: {
    uploadImg() {
      return this.imgSrc
    }
  },
  methods: {
    chooseImage() {
      this.$pt.chooseImage({
        count: 1,
        sizeType: ['original'], // 选择原图
        success: res => {
          this.uploadImg = res.tempFilePaths[0]
          this.$emit('uploadPerSuccess', res)
        },
        fail: err => {
          this.$emit('uploadPerFail', err)
        },
        complete: res => {
          this.$emit('uploadPerComplete', res)
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.upload-image{
  .text-style {
    color: #7427FF;
  }
  .plus-icon {
    width: 29px;
    height: 29px;
    background: #7427FF;
    border-radius: 50%;
    color: #fff;
  }
  .upload-box{
    width: 153px;
    height: 100px;
    border-radius: 5px;
    box-sizing: border-box;
    border: 1px dashed #9C9C9C;
    .upload-icon{
      width: 29px;
      height: 29px;
      border-radius: 50%;
      background-color: #FF243D;
      position: relative;
      margin: 23px auto 0;
      &::before{
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 12px;
        height: 2px;
        background-color: #FFF;
        border-radius: 1px;
      }
      &::after{
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(90deg);
        width: 12px;
        height: 2px;
        background-color: #FFF;
        border-radius: 1px;
      }
    }
    .upload-text{
      text-align: center;
      margin-top: 15px;
      font-size: 12px;
      color: #FF1717;
    }
  }
  .image-box{
    width: 153px;
    height: 100px;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    img{
      width: 153px;
      height: 100px;
    }
    .reupload{
      position: absolute;
      width: 100%;
      height: 27px;
      line-height: 27px;
      left: 0;
      bottom: 0;
      text-align: center;
      font-size: 12px;
      color: #FFF;
      background-color: rgba(0, 0, 0, .5);
    }
  }
}
</style>
